<!DOCTYPE html>
<!--
    To change this license header, choose License Headers in Project Properties.
    To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--        <link rel="stylesheet" type="text/css" href="http://192.168.1.236:8888/ext-4.2.1.883/resources/css/ext-all.css"/>
    <script type="text/javascript" src="http://192.168.1.236:8888/ext-4.2.1.883/ext-all-debug.js"></script>
    <script type="text/javascript" src="http://192.168.1.236:8888/ext-4.2.1.883/locale/ext-lang-zh_CN.js"></script>-->
    <link rel="stylesheet" type="text/css" href="ext-4.2.1.883/resources/css/ext-all.css"/>
    <script type="text/javascript" src="ext-4.2.1.883/ext-all-debug.js"></script>
    <script type="text/javascript" src="ext-4.2.1.883/locale/ext-lang-zh_CN.js"></script>
</head>
<body>
<script type="text/javascript">


//    var users = {
//        "users": [
//            {"name": "Lisa000", "email": "123123@gmail.com", "phone": "123456789"},
//            {"name": "Misa", "email": "123124@gmail.com", "phone": "223456789"},
//            {"name": "Nisa", "email": "123125@gmail.com", "phone": "323456789"},
//            {"name": "Oisa", "email": "123126@gmail.com", "phone": "423456789"},
//        ]
//    };
    /**
     * 定义MODEL
     */
    Ext.define('User', {
        extend: 'Ext.data.Model',
        fields: [
            {name: 'name', type: 'string'},
            {name: 'email', type: 'string'},
            {name: 'phone', type: 'string'}
        ]
    });

    /**
     * 通过AJAX读取JSON文件数据,返回JSON对象
     * @param url:JSON文件路径
     * @param users:JSON对象容器
     */
    var users = null;
    function getJson() {
        var users1 = null;
        var text = null;
        Ext.Ajax.request({
            url: 'user.json',
            async : false,
            params: {
                id: 1
            },
            success: function (response) {
                text = response.responseText;
                users1 = eval("(" + text + ")");
            }
        });
        return users1;
    }

//    function get(){
//        getJson();
//        alert("2nd" + text);
//    }
    users = getJson();

    /**
     * 创建GRID所需的store
     */
    Ext.create('Ext.data.Store', {
        storeId: 'simpsonsStore',
//            autoload:true,
        model: 'User',
        data: users,
        proxy: {
            type: 'memory',
            reader: {
                type: 'json',
                root: 'users'
            }
        }
    });

    /**
     * 创建的
     */
    Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        columns: [
            {header: 'Name', dataIndex: 'name', field: 'textfield'},
            {
                header: 'Email', dataIndex: 'email', flex: 1,
                field: {
                    xtype: 'textfield',
                    allowBlank: false
                }
            },
            {header: 'Phone', dataIndex: 'phone'}
        ],
        selType: 'rowmodel',
        plugins: [
            Ext.create('Ext.grid.plugin.RowEditing', {
                clicksToEdit: 1
            })
        ],
        height: 200,
        width: 400,
        renderTo: Ext.getBody()
    });
</script>

</body>
</html>
